<template>
  <el-select v-model="model" placeholder="请选择货道模板" @change="handleChange">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup>
import { ref, onMounted, defineModel } from "vue";
import { useCommonStoreHook } from "@/store/modules/common";

const commonStore = useCommonStoreHook();
const options = ref([]);
const model = defineModel();
const emit = defineEmits();

const handleChange = (value) => {
  const label = options.value.find(item => item.value === value)?.label;
  emit("changeLabel", { value, label });
};

onMounted(() => {
  commonStore.queryFreightRoadTemplatePage({
    current: 1,
    size: 1000,
  }).then((res) => {
    options.value = res.records.map(item => ({
      label: item.freightRoadName,
      value: item.id,
    }));
  });
});
</script>
